<template>
	<view class="detail-container df fdc h100">
		<up-sticky bgColor="#fff">
			<view class="df jcsb aic terminal-header">
				<view @click="toDetail" class="df aic">
					<img class="back" src="../../static/imgs/backleft.png" alt="" />
				</view>
				<view class="df aic">
					<text>最近更新时间</text>
					<text>{{'2024-7-2 15:04:03'}}</text>
				</view>
				<view style="width: 24rpx;height: 24rpx;">

				</view>
			</view>
			<view class="detail-header df aic jcsb">
				<view>
					<text class="header-text">集中器</text>
				</view>
				<view class="header-btn">完成换装</view>
			</view>

			<view class="df aic jcsb mt40">
				<text class="terminal-type">旧终端</text>
				<text class="terminal-type">新终端</text>
			</view>
		</up-sticky>
		<!-- 需要补充tab功能 -->
		<view class="w100 mt40 f1">
			<swiper class="h100" :autoplay="false" :duration="500">
				<swiper-item>
					<view class="swiper-item">
						<view v-for="item in form_list" class=" list-container df aic" :key="item">
							<view class="df aic jcsb">
								<text class="lebel-text">{{item.name}}</text>
								<text>{{item.value}}</text>
							</view>
						</view>
						<view class="df aic" style="height: 100rpx;">
							<text style="font-size: 28rpx;line-height: 40rpx;">添加现场照片（{{0}}）张</text><text style="color: red;">*</text>
						</view>
						<view style="box-shadow: 0px 1px 0px 0px #F1F0F0;padding: 20rpx 0;" class="">
							
						</view>
						<view class="df aic" style="height: 100rpx;">
							<text style="font-size: 28rpx;line-height: 40rpx;">备注信息</text>
						</view>
						<view style="box-shadow: 0px 1px 0px 0px #F1F0F0;padding: 20rpx 0;" class="">
							
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="df aic">
							<img class="mr20" style="width: 32rpx;height: 32rpx;" src="../../static/imgs/base.png" alt="" />
							<text style="font-size: 28rpx;font-weight: 600;color: #2D6CE8;">集中器基础信息</text>
						</view>
						<view class="robot-name df fdc jcc h160">
							<view class="df aic ">
								<text>集中器名称</text>
								<text class="cr">*</text>
							</view>
							<input placeholder="请输入集中器名称" class="mt20" type="text" />
						</view>
						<view class="robot-name df fdc jcc h160">
							<view class="df aic ">
								<text>集中器条码</text>
								<text class="cr">*</text>
							</view>
							<view style="position: relative;">
								<input placeholder="请扫码集中器条码" class="mt20" type="number" />
								<img style="width: 40rpx;height: 40rpx;position: absolute;right: 0;top: 30rpx;" src="../../static/imgs/sm.png" alt="" />
							</view>
						</view>
						<view class="robot-name df fdc jcc h160">
							<view class="df aic ">
								<text>区域码</text>
								<text class="cr">*</text>
							</view>
							<input placeholder="请输入区域码" class="mt20" type="text" />
						</view>
						<view class="robot-name df fdc jcc h160">
							<view class="df aic ">
								<text>终端地址</text>
								<text class="cr">*</text>
							</view>
							<input placeholder="请输入终端地址" class="mt20" type="text" />
						</view>
						<view class="robot-name df fdc jcc h160">
							<view class="df aic ">
								<text>UIM码</text>
							</view>
							<input placeholder="请输入UIM码" class="mt20" type="text" />
						</view>
						<view class="robot-name df fdc jcc h160">
							<view class="df aic ">
								<text>电话卡号</text>
							</view>
							<input placeholder="请输入电话卡号" class="mt20" type="text" />
						</view>
						<view class="robot-name df fdc jcc h160">
							<view class="df aic ">
								<text>设备型号</text>
							</view>
							<input placeholder="请输入设备型号" class="mt20" type="text" />
						</view>
						<view class="robot-name df fdc jcc h160">
							<view class="df aic ">
								<text>集中器生产厂家</text>
								<text class="cr">*</text>
							</view>
							<input placeholder="请选择集中器生产厂家" class="mt20" type="text" />
						</view>
						<view class="robot-name df fdc jcc h160">
							<view class="df aic ">
								<text>工作电压</text>
								<text class="cr">*</text>
							</view>
							<input placeholder="请选择工作电压" class="mt20" type="text" />
						</view>
						<view class="robot-name df fdc jcc h160">
							<view class="df aic ">
								<text>上行通道</text>
								<text class="cr">*</text>
							</view>
							<input placeholder="请选择上行通道" class="mt20" type="text" />
						</view>
						<view class="robot-name df fdc jcc h160">
							<view class="df aic ">
								<text>下行通道</text>
								<text class="cr">*</text>
							</view>
							<input placeholder="请选择下行通道" class="mt20" type="text" />
						</view>
						<view class="df aic mt40">
							<img class="mr20" style="width: 32rpx;height: 32rpx;" src="../../static/imgs/base.png" alt="" />
							<text style="font-size: 28rpx;font-weight: 600;color: #2D6CE8;">其他信息</text>
						</view>
						<view class="df mt40">
							<text style="font-size: 28rpx;font-weight: 500;color: #10151F;">添加现场照片（{{0}}）张</text>
							<text class="cr">*</text>
						</view>
						<view class="">
							
						</view>
						<view class="df jcsb aic mt40">
							<view class="df">
								<text style="font-size: 28rpx;font-weight: 500;color: #10151F;">安装位置</text>
								<text class="cr">*</text>
							</view>
							<view class="df">
								<text style="font-size:24rpx;font-weight:500;color:#2D6CE8;" class="mr20">打开地图</text>
								<text style="font-size:24rpx;font-weight:500;color:#2D6CE8;">重新定位</text>
							</view>
						</view>
						<view class="">
							
						</view>
						<view class="df mt40 mb40">
							<text style="font-size: 28rpx;font-weight: 500;color: #10151F;">备注信息</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const list1 = ref([{
			name: '旧终端'
		},
		{
			name: '新终端'
		}
	])
	const form_list = ref([{
			name: '终端名称'
		},
		{
			name: '终端编码'
		},
		{
			name: '终端地址'
		},
		{
			name: '区位码'
		},
		{
			name: '投运状态'
		},
		{
			name: '生产厂家'
		},
	])
</script>

<style lang="scss">
	page {
		height: 100%;
		box-sizing: border-box;
	}

	.back {
		width: 48rpx;
		height: 48rpx;
	}

	.header-text {
		font-size: 36rpx;
		font-weight: 600;
		color: #272727;
	}

	.detail-header {
		padding: 40rpx 40rpx;
		border-radius: 16rpx;
		border-image: linear-gradient(99deg, #FFFFFF -4%, rgba(255, 255, 255, 0) 100%);
		border: 1px solid #fff;
		box-shadow: 0px 10rpx 10rpx rgba(45, 108, 232, .1);

	}

	.header-btn {
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		color: #fff;
		background: linear-gradient(270deg, #58C2F7 -23%, #2D6CE8 168%);
		border-radius: 36rpx;
		padding: 0 40rpx;
	}

	:deep(.u-tabs__wrapper__nav) {
		display: flex;
		justify-content: space-between;
	}

	.terminal-type {
		font-size: 28rpx;
		font-weight: 500;
		line-height: 48rpx;
		color: #7D7D7D;
	}

	.active {
		color: #2D6CE8;
	}

	.lebel-text {
		font-size: 28rpx;
		font-weight: 500;
		color: #AAB1B7;
		line-height: 40rpx;
	}

	.list-container {
		height: 100rpx;
		box-shadow: 0px 1px 0px 0px #F1F0F0;
	}
	:deep(.u-sticky){
		height: 300rpx !important;
	}
	.detail-container{
		padding: 0 40rpx 0 40rpx;
	}
	.h160{
		height: 160rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #10151F;
		box-shadow: 0px 1px 0px 0px #F1F0F0;
	}
	:deep(.swiper-item){
		height: 100%;
		overflow-y: scroll !important;
	}
</style>